<template>
    <div id="com-container">
        <div
            :id="
                $route.path === '/index' ? 'right-bottom-container-index' : 'right-bottom-container'
            "
            ref="box"
        ></div>
    </div>
</template>

<script>
import { TotalArea } from '../request/api';
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            myChart: null
        };
    },
    computed: {
        ...mapGetters({
            theme: 'theme'
        })
    },
    watch: {
        theme() {
            this.myChart.off('dblclick')
            this.myChart.dispose()
            this.initCharts()
            this.getData()
            this.changeCharts()
            this.dblClick()
        }
    },
    mounted() {
        this.initCharts()
        this.getData()
        window.addEventListener('resize', () => {
            this.changeCharts()
        })
        this.changeCharts()
        this.dblClick()
    },
    methods: {
        dblClick() {
            this.myChart.getZr().on('dblclick', () => {
                if (this.$route.path === '/index') {
                    this.$router.push('/rightbottom')
                } else {
                    this.$router.push('/index')
                }
            });
        },
        initCharts() {
            this.myChart = this.$echarts.init(this.$refs.box, this.theme)
            let option = {
                title: {
                    text: '种植作物面积统计',
                    top: '10px',
                    left: '20px'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '20px',
                    top: '40px'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '60%'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',

                            }
                        }
                    }
                ]
            };
            this.myChart.setOption(option);
        },
        async getData() {
            let res = await TotalArea()
            this.setCharts(res)

        },
        setCharts(res) {
            let option = {
                series: [
                    {
                        name: res.map(item => item.name),
                        type: 'pie',
                        data: res,
                    }
                ]
            }
            this.myChart.setOption(option);
        },
        // 4、图表适配
        changeCharts() {
            let width = this.$refs.box.offsetWidth / 100
            let fontSize = this.$route.path === '/index' ? width * 5 : width * 1.6
            this.myChart.resize()
            let option = {
                title: {
                    textStyle: {
                        fontSize
                    }
                }
            }
            this.myChart.setOption(option);
        }
    },
};
</script>

<style scoped>
#right-bottom-container-index {
    width: 90%;
    height: 90%;
    margin: auto;
    border: 1px solid #38c5ec;
}
#right-bottom-container {
    width: 100%;
    height: 100%;
}
</style>
